<script>
import DeviceApi from '../../api/device'
import DeviceSearch from '../../components/device/DeviceSearch.vue'
import { useUserStore } from '../../stores/user'

export default {
  components: { DeviceSearch,

   },
  data() {
    return {
      deviceList: [],
      total: 0,
      pageSize: 7,
      curPage: 0,
      limit: -1,
      offset: -1,
    }
  },
  computed: {
    isAdmin() {
      const userStore = useUserStore();
      return userStore.isAdmin;
    }
  },
  methods: {
    async getDeviceList(limit = -1, offset = -1) {
      try {
        let orderBy = 'created_time'
        let sort = 'DESC'
        const api = new DeviceApi()
        let res = await api.findAll(limit, offset, orderBy, sort)
        if (res && res.data) {
          this.deviceList = res.data
          console.log('Device list:', this.deviceList)
        } else {
          console.error('Invalid response format:', res)
          this.$myMessageBox('获取设备列表失败：数据格式错误')
        }
      } catch (err) {
        console.error('Error fetching device list:', err)
        if (err.response && err.response.status === 401) {
          this.$myMessageBox('请先登录后再访问')
          this.$router.push('/login')
        } else {
          this.$myMessageBox('应用服务器访问错误！')
        }
      }
    },
    async getCount() {
      try {
        const api = new DeviceApi()
        let res = await api.getCount()
        if (res && res.data && typeof res.data.total === 'number') {
          this.total = res.data.total
          console.log('Total count:', this.total)
        } else {
          console.error('Invalid count response:', res)
          this.$myMessageBox('获取设备总数失败：数据格式错误')
        }
      } catch (err) {
        console.error('Error fetching count:', err)
        if (err.response && err.response.status === 401) {
          this.$myMessageBox('请先登录后再访问')
          this.$router.push('/login')
        } else {
          this.$myMessageBox('应用服务器访问错误！')
        }
      }
    },
    async searchResult(data) {
      this.deviceList = data
    },
    goto(page) {
      this.curPage = page
      this.offset = (page - 1) * this.pageSize
      this.getDeviceList(this.limit, this.offset)
    },
  },

  async mounted() {
    this.curPage=1;
    this.limit=this.pageSize
    this.offset=0
    await this.getCount()
    this.getDeviceList(this.limit, this.offset)
  },
}
</script>

<template>
  <div class="device-list">
    <div class="header">
      <my-pagination
        :total="total"
        :pageSize="pageSize"
        :curPage="curPage"
        :showInfo="true"
        @goto="goto"
      />
      <device-search @search-result="searchResult"></device-search>
    </div>
    <div class="device-grid">
      <div v-for="device in deviceList" :key="device.id" class="device-card">
        <div class="device-image">
          <img :src="device.imageurl" :alt="device.title" referrerpolicy="no-referrer" />
        </div>
        <div class="device-info">
          <h3 class="device-title">
            <router-link :to="'/device/' + device.id">{{ device.title }}</router-link>
          </h3>
          <div class="device-details">
            <span class="detail-item">
              <i class="fas fa-building"></i>
              单位：{{ device.danwei }}
            </span>
            <span class="detail-item">
              <i class="fas fa-barcode"></i>
              型号：{{ device.spcialtype }}
            </span>
            <span class="detail-item">
              <i class="fas fa-tag"></i>
              类型：{{ device.category }}
            </span>
            <!-- <span class="detail-item">
              <i class="fas fa-user"></i>
              联系人：{{ device.contact }}
            </span>
            <span class="detail-item">
              <i class="fas fa-phone"></i>
              电话：{{ device.phone }}
            </span>
            <span class="detail-item">
              <i class="fas fa-map-marker-alt"></i>
              位置：{{ device.location }}
            </span> -->
          </div>
        </div>
      </div>
      <template v-if="isAdmin">
        <router-link to="/device/add" class="action-card add-device-card">
          <div class="add-icon">+</div>
          <span>添加设备</span>
        </router-link>
      </template>
      <template v-else>
        <router-link to="/device/bookings" class="action-card booking-card">
          <div class="booking-icon">
            <i class="fas fa-calendar-check"></i>
          </div>
          <span>我的预约</span>
          <p class="booking-tip">查看和管理您的设备预约记录</p>
        </router-link>
      </template>
    </div>
  </div>
</template>

<style scoped>
.device-list {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.device-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  overflow: hidden;
}

.device-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.device-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.device-card:hover .device-image img {
  transform: scale(1.05);
}

.device-info {
  padding: 16px;
}

.device-title {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

.device-title a {
  color: #2c3e50;
  text-decoration: none;
  transition: color 0.2s ease;
}

.device-title a:hover {
  color: #3498db;
}

.device-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-item i {
  color: #3498db;
  width: 16px;
}

.action-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #666;
  transition: all 0.2s ease;
  min-height: 200px;
  padding: 20px;
}

.add-device-card {
  border: 2px dashed #ddd;
}

.add-device-card:hover {
  border-color: #3498db;
  color: #3498db;
  background-color: #f8f9fa;
}

.booking-card {
  border: 2px solid #e8f4fd;
  background-color: #f8f9fa;
}

.booking-card:hover {
  border-color: #3498db;
  background-color: #e8f4fd;
}

.add-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #3498db;
}

.booking-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #3498db;
}

.booking-tip {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
  text-align: center;
}

@media (max-width: 768px) {
  .device-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }

  .device-list {
    padding: 12px;
  }
}
</style>
